<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博文尚美 - 品牌设计与规划</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="images/logo.png" alt="博文尚美">
        </div>
        <nav>
            <ul>
                <li><a href="#home">HOME</a></li>
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#portfolio">PORTFOLIO</a></li>
                <li><a href="#service">SERVICE</a></li>
                <li><a href="#news">NEWS</a></li>
                <li><a href="#contact">CONTACT</a></li>
            </ul>
        </nav>
    </header>

    <section class="slider">
        <div class="slide active">
            <img src="images/slider-1.jpg" alt="创意设计">
          
        </div>
        <div class="slider-dots">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </section>

    <section class="services">
        <h2>服务范围</h2>
        <p class="subtitle">OUR SERVICES</p>
        <div class="service-grid">
            <div class="service-item">
                <div class="icon"><img src="images/web-icon.png" alt="Web Design"></div>
                <h3>1.WEB DESIGN</h3>
                <p>企业品牌网站设计/手机网站制作<br>动画网站/游戏设计</p>
            </div>
            <div class="service-item">
                <div class="icon"><img src="images/graphic-icon.png" alt="Graphic Design"></div>
                <h3>2.GRAPHIC DESIGN</h3>
                <p>标志LOGO设计/产品宣传册设计<br>企业广告/海报设计</p>
            </div>
            <div class="service-item">
                <div class="icon"><img src="images/ebusiness-icon.png" alt="E-Business"></div>
                <h3>3.E-BUSINESS PLAN</h3>
                <p>淘宝/天猫装修设计及运营推广<br>企业微博、微信营销</p>
            </div>
            <div class="service-item">
                <div class="icon"><img src="images/mail-icon.png" alt="Mail Agents"></div>
                <h3>4.MAILBOXAGENTS</h3>
                <p>腾讯/网易企业邮箱定制代理<br>个性化邮箱定制开发</p>
            </div>
        </div>
    </section>

    <section class="cases">
        <h2>客户案例</h2>
        <p class="subtitle">WITH THE BEST PROFESSIONAL TECHNOLOGY, TO DESIGN THE BEST INNOVATIVE WEB SITE</p>
        <div class="case-grid">
            <div class="case-item">
                <img src="images/case-sunglasses.jpg" alt="时尚眼镜">
                <div class="case-overlay">
                    <h3>时尚眼镜品牌设计</h3>
                    <p>品牌形象设计</p>
                </div>
            </div>
            <div class="case-item">
                <img src="images/case-chair.jpg" alt="休闲家具">
                <div class="case-overlay">
                    <h3>休闲家具设计</h3>
                    <p>产品展示设计</p>
                </div>
            </div>
            <div class="case-item">
                <img src="images/case-industrial.jpg" alt="工业设计">
                <div class="case-overlay">
                    <h3>工业产品设计</h3>
                    <p>企业形象设计</p>
                </div>
            </div>
        </div>
        <button class="view-more-cases">VIEW MORE</button>
    </section>

    <section class="news">
        <h2>最新资讯</h2>
        <p class="subtitle">TED LATEST NEWS</p>
        <div class="news-grid">
            <div class="news-image">
                <img src="images/news-office.jpg" alt="办公室环境">
            </div>
            <div class="news-list">
                <div class="news-item">
                    <div class="news-date">
                        <div class="day">09</div>
                        <div class="month">Jan</div>
                    </div>
                    <div class="news-content">
                        <h3>网站建设进入第三阶段巧妙期</h3>
                        <p>但企业网站的制作并不仅仅是品牌化和视觉化的简单堆砌，更不能因为追求网站的视觉效果而忽略了...</p>
                    </div>
                </div>

                <div class="news-item">
                    <div class="news-date">
                        <div class="day">08</div>
                        <div class="month">Jan</div>
                    </div>
                    <div class="news-content">
                        <h3>flash网站制作的优缺点</h3>
                        <p>虽然flash制作费用比较高，大大增加制作的工作量，但是其优秀的表现力和良好的互动性使得...</p>
                    </div>
                </div>

                <div class="news-item">
                    <div class="news-date">
                        <div class="day">07</div>
                        <div class="month">Jan</div>
                    </div>
                    <div class="news-content">
                        <h3>做个网站多少钱？</h3>
                        <p>"做个网站多少钱？"当客户问及这个问题时首先要看客户需求，一个完整的网站需要考虑多个方面...</p>
                    </div>
                </div>

                <div class="news-item">
                    <div class="news-date">
                        <div class="day">06</div>
                        <div class="month">Jan</div>
                    </div>
                    <div class="news-content">
                        <h3>做网站优化必须注意网站结构优化</h3>
                        <p>大部分人都知道自己的网站需要优化，一开始就应该注意网站的整体结构，这样更有利于后期的优化...</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="footer-content">
            <p>Copyright 2006 - 2014 Bowenshangmei Culture All Rights Reserved.</p>
            <nav>
                <a href="#home">Home</a> |
                <a href="#about">About</a> |
                <a href="#portfolio">Portfolio</a> |
                <a href="#contact">Contact</a>
            </nav>
        </div>
    </footer>
</body>
</html> 